<template>
	<view :class="['item','item-'+index,{'item-checked':data.value===0,'item-pick':pick}]" @click="clickItem(item)">
		<image class="check-img" src="/static/pick.png" mode="aspectFit" v-if="selected==1"></image>
		<view class="hd">
			<view :class="['avatar',{'blur':isBlur}]">
				<lazy-load-image class="img" :image="item.merchant_img" imgMode='aspectFill' :errorImg="config.errorImage.avator" height="86rpx" borderRadius="43" />
				<icon :class="['iconfont icon','icon-auth-'+item.merchant_auth]">&#xe796;</icon>
			</view>
			<view class="name">
				<text :class="['strong',{'blur':isBlur}]">{{item.merchant_nickname}}</text>
				<text class="small">参与接单:{{item.sum_takeorders}}</text>
			</view>
			<view class="btns">
				<uni-data-checkbox class="checkbox" v-model="data.value" :localdata="data.range" selectedColor="#E1835B" v-if="pick"></uni-data-checkbox>
				<template v-else>
					<icon class="iconfont icon icon-mobile" v-if="item.mobile" @click.stop="contact(item,'mobile')">&#xe76f;</icon>
					<icon class="iconfont icon icon-weixin" v-if="item.weixin" @click.stop="contact(item,'weixin')">&#xe7d5;</icon>
					<button type="default" class="btn" @click.stop="navToCheckLogin(`/subpages/chat/chat?conversationID=${item.merchant_mid}&nick=${encodeURIComponent(item.merchant_nickname)}`)">免费咨询</button>
				</template>
			</view>
		</view>
		<view class="bd">
			<view class="desc">
				<text>{{desc}}</text>
			</view>
			<view class="more" @click.stop="more()" v-if="data.more.show&&!data.more.open">
				<text>查看更多</text>
				<icon class="iconfont icon">&#xe820;</icon>
			</view>
		</view>
		<view class="ft">
			<text>所需时长：{{item.task_time}}天 | 报价：<text class="red">￥{{item.task_price}}</text></text>
		</view>
	</view>
	<!-- 联系 -->
	<popup-contact ref="popupContactRef"></popup-contact>
	<!-- 登录组件 -->
	<weixin-login ref="wxLogin" />
</template>
<script setup>
	import { ref, reactive, watch, defineComponent, computed } from 'vue';
	import { useStore } from 'vuex';
	import popupContact from '@/pages/find/components/popup-contact.vue';
	import useStatus from '@/common/hooks/useStatus.js';
	import config from '@/uni.config.js';
	import { removeSpace, bytesLength, cutStrByte } from '@/common/utils/index.js';
	const wxLogin = ref(null);
	const store = useStore();
	const { navToCheckLogin } = useStatus(wxLogin);
	const emits = defineEmits(['changePick']);
	defineComponent({
		popupContact
	});
	const isBlur = computed(() => {
		return +data_props.item.merchant_trial != merchantStatus.reviewSuccess;
	});
	const desc = computed(() => {
		const introduce = removeSpace(data_props.item.task_intro);
		const maxLength = 100;
		const str = data.more.open ? introduce : bytesLength(introduce) > maxLength ? `${cutStrByte(introduce, maxLength).cutStr}...` : introduce;
		data.more.show = bytesLength(introduce) > maxLength;
		return str;
	});
	const data_props = defineProps({
		item: Object,
		index: Number,
		pick: {
			type: [Number, String],
			default: 0
		},
		checked: {
			type: [Boolean],
			default: false
		},
		selected: {
			type: [String],
			default: 0
		}
	});
	const merchantStatus = {
		review: 0,
		reviewSuccess: 1,
		reviewFail: 2
	}
	const data = reactive({
		value: '',
		range: [{ "value": 0 }],
		more: {
			show: false,
			open: false
		}
	});
	const popupContactRef = ref(null);
	watch(() => data_props.checked, (newVal) => {
		data.value = newVal ? 0 : '';
	}, { immediate: true })
	// 异常图片处理
	function more() {
		data.more.open = !data.more.open;
	}
	// 联系弹窗
	function contact(item, type) {
		if (!store.getters.token) return navToCheckLogin();
		popupContactRef.value.open(item, type);
	}
	// 点击该项
	function clickItem(item) {
		if (data_props.pick) {
			data.value = data.value === '' ? 0 : '';
			emits('changePick', data.value === '' ? null : data_props.item.merchant_mid);
		} else uni.navigateTo({
			url: `/subpages/space/space?mid=${item.merchant_mid}`
		})
	}
</script>
<style>
	.checklist-box {
		margin-right: 0 !important;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.item {
		position: relative;
		padding: 30rpx 28rpx;
		overflow: hidden;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 28rpx;
			width: 638rpx;
			height: 1px;
			background-color: #ECECEC;
		}
		&-pick::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
		}
		&-0 {
			&::after {
				display: none;
			}
		}
		&-checked {
			background-color: $color_easy;
		}
		.check-img {
			position: absolute;
			left: 50%;
			top: 80rpx;
			width: 120rpx;
			height: 120rpx;
			transform: translateX(-50%);
		}
	}
	.hd {
		@include flex;
		.avatar {
			position: relative;
			width: 86rpx;
			height: 86rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.icon {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 30rpx;
				height: 30rpx;
				justify-content: center;
				border-radius: 50%;
				transform: scale(.9);
				font-size: 20rpx;
				color: #fff;
			}
			.icon-auth {
				&-1 {
					background-color: #faad14;
				}
				&-2 {
					background-color: #ff4d00;
				}
			}
		}
		.name {
			flex: 1;
			padding: 0 16rpx;
			.strong {
				display: block;
				max-width: 240rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 30rpx;
				color: #000;
			}
			.small {
				display: block;
				max-width: 240rpx;
				margin-top: 10rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 20rpx;
				color: #aaa;
			}
		}
		.btns {
			@include flex(row, flex-end);
			width: 250rpx;
			.btn {
				width: 120rpx;
				height: 54rpx;
				line-height: 54rpx;
				margin: 0;
				padding: 0;
				border-radius: 8rpx;
				text-align: center;
				background: $color;
				font-size: 22rpx;
				color: #fff;
			}
			.icon,
			.icon-weixin {
				margin-right: 20rpx;
			}
			.icon {
				font-size: 38rpx;
				color: #CAD8EF;
			}
			.icon-weixin {
				font-size: 42rpx;
				color: #CAD8EF;
			}
			.checkbox {
				margin-right: -25px;
				transform: scale(1.2);
			}
		}
	}
	.bd {
		line-height: 36rpx;
		margin: 26rpx 0;
		word-break: break-all;
		font-size: 24rpx;
		color: #666;
		.more {
			@include flex(row, center);
			margin-top: -34rpx;
			font-size: 24rpx;
			color: #aaa;
			&:before {
				content: '';
				display: block;
				width: 100%;
				height: 34rpx;
				margin-bottom: 10rpx;
				background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
			}
			.icon {
				font-size: 28rpx;
				margin-left: 8rpx;
			}
		}
	}
	.ft {
		font-size: 20rpx;
		color: #aaa;
		.red {
			color: #ff0000;
		}
	}
</style>
